<template>
    <div>
        <table class="table table-bordered">
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="add.name"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="add.pwd"></td>
            </tr>
            <tr>
                <td>头像</td>
                <td>
                <td>
                    <input type="file" @change="imga">
                    <img :src="add.img" width="100" height="100" v-if="add.img != ''">
                </td>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="注册" @click="ok"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from "vue";
import moment from 'moment';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

let add:any = reactive(
    {
        "name": "string",
        "pwd": "string",
        "img": "string"
    }
)
const imga = (e: any) => {
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    axios({
        url: 'https://localhost:7073/api/Emp/ImgAdd',
        method: 'post',
        data: f
    })
        .then(res => {
            console.log(res)
            add.img=res.data;
        })
        .catch(err => {
            console.log(err);
        })
}
const ok = () => {
    axios({
        url: 'https://localhost:7073/api/Emp/addlogin',
        method: 'post',
        data:add
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1)
    {
        alert("用户名重复");
        return;
    }
    else{
        alert("注册成功");
        router.push('/Loginview');
    }
    })
    .catch(err=>{
        console.log(err);
        
    })
}
</script>

<style scoped></style>